<script lang="ts" setup>
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {goodsEdit} from "../../api/goods";
import {useRoute, useRouter} from "vue-router";

const router = useRouter()
const route = useRoute()
const Api = ref<string>("http://sellServe.hxw.asia:5000")
let formLabelAlign = reactive({
  category: "",
  price: '',
  imgUrl: "",
  goodsDesc: '',
  id: '',
  name: '',
})

function handleAvatarSuccess(res: any, flie: any) {
  let {code, msg, imgUrl} = res
  if (code == 0) {
    formLabelAlign.imgUrl = imgUrl
  }
}

function beforeAvatarUpload(file: any) {
  const isJPG: boolean = /[jpeg|png]/.test(file.type)
  const isLt2M: boolean = file.size / 1024 / 1024 < 2
  if (!isJPG) {
    ElMessage.error('上传头像图片只能是 JPG 格式!')
  }
  if (!isLt2M) {
    ElMessage.error("上传头像图片大小不能超过 2MB!")
  }
  return isJPG && isLt2M
}

async function uploader() {
  let {category, price, imgUrl, goodsDesc, id, name} = formLabelAlign
  imgUrl = imgUrl.substr(imgUrl.lastIndexOf('/') + 1)
  let res = await goodsEdit({category, price, imgUrl, goodsDesc, id, name})
  let {code, msg} = res.data
  if (code == 0) {
    await router.push('/goods/goods-list')
  }
}

let {id}: any = route.query
let data = JSON.parse(id)
formLabelAlign = {...data}
</script>
<template>
  <el-card>
    <template #header>
      <div class="clearfix">
        <span>商品编辑</span>
      </div>
    </template>
    <el-form label-width="100px" class="form">
      <el-form-item label="商品名称">
        <el-input v-model="formLabelAlign.name"></el-input>
      </el-form-item>
      <el-form-item label="商品分类">
        <el-input v-model="formLabelAlign.category"></el-input>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input-number
            v-model="formLabelAlign.price"
            :min="0"
            :max="100"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="商品图片地址">
        <el-upload
            class="avatar-uploader"
            :action="Api + '/goods/goods_img_upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
          <img
              v-if="Api + formLabelAlign.imgUrl"
              :src="Api + formLabelAlign.imgUrl"
              class="avatar"
          />
          <el-icon v-else class="avatar-uploader-icon">
            <plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input
            type="textarea"
            rows:4
            v-model="formLabelAlign.goodsDesc"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品ID">
        <el-input v-model="formLabelAlign.id"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="uploader"
        >编辑
        </el-button
        >
      </el-form-item
      >
    </el-form>
  </el-card>
</template>
<style lang="scss" scoped></style>